<template>
  <div id="app">
    <transition name="slide">
      <Toast v-show="$store.state.toastStatus"></Toast>
    </transition>
    <Header :key="num"></Header>
    <Nav></Nav>
    <!-- routerview也是一个组件，可以给绑定自定义事
    件触发函数 fn1，是header绑定的key改变刷新组件 -->
    <router-view @fn='fn1'/>
    <Footer></Footer>
    <Login v-show="$store.state.ifShowLoginModal"></Login>
    
    
  </div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Nav from './components/Nav.vue'
import Home from './views/Home.vue'
import Login from './components/Login.vue'
import Toast from './components/Toast.vue'
export default {
  methods:{
    fn1(){
      this.num++
    }
  },
  data() {
    return {
      num: 0,
    }
  }
  ,
  components: {
    Nav,
    Header,
    Footer,
    Home,
    Login,
    Toast,
  },
  wtach: {
    '$route.path': {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          //说明已经离开当前页面，需要重新加载Header组件，这样才可以再一次进入Header组件的created
          //修改num的值，触发Header重新加载
          this.num++
        }
      },
    },
  },
}
</script>
<style lang="less">
@import 'https://at.alicdn.com/t/font_2730880_ylrio3ahhx.css';
body {
  font-size: 16px;
  font-family: SourceHanSansSC;
  color: #333333;
}
input {
  outline: none;
}
//toast的动画效果
.slide-enter,
.slide-leave-to {
  top: -200px;
}
.slide-enter-active,
.slide-leave-active {
  transition: top 1s linear;
}
.slide-enter-to,
.slide-leave {
  top: 0;
}
</style>
